<template>
  <view class="user-setting-page">
    <view class="navbar">
      <view class="navbar-back" @click="navigateBack">
        <image src="/static/images/back-icon.png" mode="aspectFit"></image>
      </view>
      <view class="navbar-title">设置</view>
    </view>
    <view class="setting-group">
      <view class="setting-item" @click="goToAccountSecurity">
        <text class="item-title">账户与安全</text>
        <image src="/static/images/arrow-right.png" mode="aspectFit"></image>
      </view>
      <view class="setting-item" @click="goToNotification">
        <text class="item-title">消息通知</text>
        <image src="/static/images/arrow-right.png" mode="aspectFit"></image>
      </view>
      <view class="setting-item" @click="goToPrivacy">
        <text class="item-title">隐私设置</text>
        <image src="/static/images/arrow-right.png" mode="aspectFit"></image>
      </view>
      <view class="setting-item" @click="goToAppearance">
        <text class="item-title">外观设置</text>
        <image src="/static/images/arrow-right.png" mode="aspectFit"></image>
      </view>
    </view>
    <view class="setting-group">
      <view class="setting-item" @click="goToAbout">
        <text class="item-title">关于我们</text>
        <image src="/static/images/arrow-right.png" mode="aspectFit"></image>
      </view>
      <view class="setting-item" @click="goToHelp">
        <text class="item-title">帮助中心</text>
        <image src="/static/images/arrow-right.png" mode="aspectFit"></image>
      </view>
      <view class="setting-item" @click="goToFeedback">
        <text class="item-title">意见反馈</text>
        <image src="/static/images/arrow-right.png" mode="aspectFit"></image>
      </view>
      <view class="setting-item" @click="goToConfigManager">
        <text class="item-title">配置管理</text>
        <image src="/static/images/arrow-right.png" mode="aspectFit"></image>
      </view>
    </view>
    <view class="setting-group">
      <view class="setting-item">
        <text class="item-title">当前版本</text>
        <text class="item-value">v1.0.0</text>
        <image src="/static/images/arrow-right.png" mode="aspectFit" @click="checkUpdate"></image>
      </view>
    </view>
    <button class="logout-btn" @click="logout">退出登录</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentVersion: 'v1.0.0'
    }
  },
  methods: {
    navigateBack() {
      uni.navigateBack();
    },
    goToAccountSecurity() {
      uni.navigateTo({
        url: '/pages/user/account-security'
      });
    },
    goToNotification() {
      uni.navigateTo({
        url: '/pages/user/notification'
      });
    },
    goToPrivacy() {
      uni.navigateTo({
        url: '/pages/user/privacy'
      });
    },
    goToAppearance() {
      uni.navigateTo({
        url: '/pages/user/appearance'
      });
    },
    goToAbout() {
      uni.navigateTo({
        url: '/pages/user/about'
      });
    },
    goToHelp() {
      uni.navigateTo({
        url: '/pages/user/help'
      });
    },
    goToFeedback() {
      uni.navigateTo({
        url: '/pages/user/feedback'
      });
    },
    goToConfigManager() {
      uni.navigateTo({
        url: '/pages/admin/config/index'
      });
    },
    checkUpdate() {
      // 模拟检查更新
      uni.showModal({
        title: '检查更新',
        content: '当前已是最新版本',
        showCancel: false
      });
    },
    logout() {
      uni.showModal({
        title: '确认退出',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除本地存储
            uni.removeStorageSync('userInfo')
            uni.removeStorageSync('token')
            
            // 跳转到登录页
            uni.reLaunch({
              url: '/pages/login/index'
            })
          }
        }
      })
    }
  }
}
</script>

<style>
.user-setting-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.setting-group {
  background-color: #fff;
  margin-bottom: 20rpx;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.setting-item:last-child {
  border-bottom: none;
}

.item-title {
  font-size: 30rpx;
  color: #333;
}

.item-value {
  font-size: 30rpx;
  color: #999;
  margin-right: 20rpx;
}

.setting-item image {
  width: 24rpx;
  height: 40rpx;
}

.logout-btn {
  width: 680rpx;
  height: 96rpx;
  line-height: 96rpx;
  text-align: center;
  background-color: #fff;
  color: #ff4500;
  border-radius: 48rpx;
  font-size: 32rpx;
  margin: 60rpx auto;
  border: 1rpx solid #ff4500;
}
</style>    